<template>
  <div class="container">
    <div class="title">中文作业相似度计算</div>
    <div class="file-upload">
      <div class="input-wrapper">
        <label for="p1">选择文件1：</label>
        <input type="file" id="p1" ref="p1" accept=".txt">
      </div>
      <div class="input-wrapper">
        <label for="p2">选择文件2：</label>
        <input type="file" id="p2" ref="p2" accept=".txt">
      </div>
      <button class="btn" @click="zh_doc2vec">计算相似度</button>
    </div>
    <div class="result_zh" v-if="result_zh">
      相似度：{{result_zh}}
    </div>


    <div class="title">英文作业相似度计算</div>
    <div class="file-upload">
      <div class="input-wrapper">
        <label for="e1">选择文件1：</label>
        <input type="file" id="e1" ref="e1" accept=".txt">
      </div>
      <div class="input-wrapper">
        <label for="e2">选择文件2：</label>
        <input type="file" id="e2" ref="e2" accept=".txt">
      </div>
      <button class="btn" @click="en_doc2vec">计算相似度</button>
    </div>
    <div class="result_zh" v-if="result_en">
      相似度：{{result_en}}
    </div>
  </div>




</template>
<style>
.container {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

.title {
  font-size: 32px;
  margin: 50px 0;
}

.file-upload {
  display: flex;
  flex-direction: column;
  margin-bottom: 50px;
}

.input-wrapper {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

label {
  font-size: 18px;
  margin-right: 10px;
}

.btn {
  background-color: #007bff;
  color: #fff;
  font-size: 18px;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
}

.btn:hover {
  background-color: #0069d9;
}

.result_zh {
  font-size: 24px;
  margin-top: 50px;
}
</style>
<script>
import axios from 'axios';

export default {
  data() {
    return {
      result_zh: '',
      result_en: '',
    }
  },
  methods: {
    async zh_doc2vec() {
      const p1 = this.$refs.p1.files[0];
      const p2 = this.$refs.p2.files[0];
      if (!p1 || !p2) {
        alert('请先选择两个文件！');
        return;
      }
      const formData = new FormData();
      formData.append('p1', p1);
      formData.append('p2', p2);
      const res = await axios.post('http://localhost:5001/zh_doc2vec', formData);
      this.result_zh = res.data.result_zh;
    },
    async en_doc2vec() {
      const e1 = this.$refs.e1.files[0];
      const e2 = this.$refs.e2.files[0];
      if (!e1 || !e2) {
        alert('请先选择两个文件！');
        return;
      }
      const formData = new FormData();
      formData.append('e1', e1);
      formData.append('e2', e2);
      const res = await axios.post('http://localhost:5003/en_doc2vec', formData);
      this.result_en = res.data.result_en;
    }
  },
}
</script>